<template>
    <div class="index">
        <div class="index-box">
            <el-form :model="summary" label-width="100px" class="index-emailFrom">
                <el-form-item label="标题" prop="summaryTitle">
                    <el-input v-model="summary.summaryTitle" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="openStatus" active-text="上线" inactive-text="下线">
                    </el-switch>
                </el-form-item>
                <el-form-item label="正文" prop="text">
                    <wangEditorCom @catchData="catchData" ref="editorRef" v-if="sonContent" :content="sonContent">
                    </wangEditorCom>
                    <!-- <div id="editorTitle" class="toolbar"></div> -->
                </el-form-item>
                <el-form-item class="index-emailFrom-can">
                    <el-button type="info" @click="saveSummary" size="small">保存</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>

import { getSummaryDetail, updateSummaryDetail } from '@/assets/api/utils.js';
import wangEditorCom from '../../components/upload/wangEditorCom.vue';
export default {
    data() {
        return {
            summaryId: '',
            openStatus: false,
            sonContent: "",
            summary: {
                summaryId: '',
                summaryTitle: "",
                status: '',
                summaryContent: ''
            },
        }
    },
    components: {
        wangEditorCom
    },
    mounted() {
        this.summaryId = this.$route.params.summaryId

        this.showDetail(this.summaryId)
    },
    methods: {
        //获取富文本内容
        catchData(content, text) {
            this.summary.summaryContent = content;
        },

        //保存文章
        async saveSummary() {
            if (this.openStatus == true) {
                this.summary.status = 1;
            } else {
                this.summary.status = 0;
            }
            updateSummaryDetail(this.summary).then((resp) => {
                if (resp.code == 200) {
                    this.$message.success("保存成功");
                    this.$store.dispatch("delVisitedViews", this.$route)
                    this.$router.push("/home/personSummary")
                }else{
                    this.$message.error(resp.message);
                }
            })
        },
        //查看文章详情
        async showDetail(value) {
            getSummaryDetail(value).then((resp) => {
                this.summary = resp.data;
                this.sonContent=this.summary.summaryContent;
                
                if (this.summary.status == 1 ) {
                    this.openStatus =true;
                } else {
                    this.openStatus =false;
                }
            })
        }
    }
}
</script>

<style scoped>
.index {
    width: 100%;
    min-height: 100%;
    padding: 25px;
    box-sizing: border-box;
}

.index-box {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;
}

.toolbar {
    /* border: 1px solid #ccc; */

}

.text {
    border: 1px solid #ccc;
    height: 400px;
    z-index: 1 !important;
}

.index-emailFrom-can {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* 说明文档 */
.index-foot {
    width: 100%;
    height: 70px;
    background: #EEF1F6;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 16px;
    color: #666666;
    line-height: 70px;
    padding: 0 15px;
}
</style>